<!-- 品种登记，详情 -->
<template>
    <div>
        <el-drawer :model-value="isDetailsShow" size="800px" :close-on-click-modal="false" :show-close="false" :close-on-press-escape="false">    
            <template #header>
                <h4 style="font-weight: bold;">详情</h4>
            </template>
            <div class="imitateTable">
                <div class="cattlePhotoRow">
                    <div>
                        <el-upload
                            class="avatar-uploader"
                            action="/api/upload/image"
                            :show-file-list="false"
                            :auto-upload="false"
                            :on-change="uploadLeftPhoto"
                            disabled
                        >
                            <img v-if="form.leftPhoto" :src="form.leftPhoto" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                        <div class="direction">左侧照</div>
                    </div>
                    <div class="middle">
                        <el-upload
                            class="avatar-uploader"
                            action="/api/upload/image"
                            :show-file-list="false"
                            :auto-upload="false"
                            :on-change="uploadFrontPhoto"
                            disabled
                        >
                            <img v-if="form.frontPhoto" :src="form.frontPhoto" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                        <div class="direction">正前照</div>
                    </div>
                    <div>
                        <el-upload
                            class="avatar-uploader"
                            action="/api/upload/image"
                            :show-file-list="false"
                            :auto-upload="false"
                            :on-change="uploadRightPhoto"
                            disabled
                        >
                            <img v-if="form.rightPhoto" :src="form.rightPhoto" class="avatar" />
                            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
                        </el-upload>
                        <div class="direction">右侧照</div>
                    </div>
                </div>
                <div class="ordinaryRow">
                    <div class="tdWidth borderR"><span>场名</span></div>
                    <div class="widthMaim">
                        <!-- <el-input disabled v-model="form.farmName" style="height: 40px;" placeholder="请输入场名" /> -->
                        <span>{{ form.farmName }}</span>
                    </div>
                    <div class="tdWidth borderRL"><span>品种</span></div>
                    <div class="ordinaryTd" style="display: flex; align-items: center;">
                        <span style="padding-left: 10px; font-size: 14px;">{{ form.breed }}</span>
                    </div>
                </div>
                <div class="ordinaryRow">
                    <div class="tdWidth borderR"><span>地址</span></div>
                    <div class="widthMaim">
                        <!-- <el-input disabled v-model="form.address" style="height: 40px;" placeholder="请输入地址" /> -->
                        <span>{{ form.address }}</span>
                    </div>
                    <div class="tdWidth borderRL"><span>血统纯度(%)</span></div>
                    <div class="ordinaryTd">
                        <!-- <el-input disabled v-model="form.purity" style="height: 40px;" placeholder="请输入血统纯度" /> -->
                        <span style="font-size: 14px; display: block; line-height: 40px; padding-left: 10px;">{{ form.purity }}</span>
                    </div>
                </div>
                <div class="ordinaryRow">
                    <div class="tdWidth borderR"><span>肉牛登记号</span></div>
                    <div class="widthMaim">
                        <!-- <el-input disabled v-model="form.registrationNumber" style="height: 40px;" placeholder="请输入肉牛登记号" /> -->
                        <span>{{ form.registrationNumber }}</span>
                    </div>
                    <div class="tdWidth borderRL"><span>生产管理号</span></div>
                    <div class="ordinaryTd">
                        <!-- <el-select clearable filterable v-model="form.cowId" @clear="clearItem" disabled>
                            <el-option v-for="item in allComNameList" :label="`${item.code}-${item.breed}-${item.genderName}`" :value="item.id" @click="selectItem(item)" />
                        </el-select> -->
                        <span style="font-size: 14px; display: block; line-height: 40px; padding-left: 10px;">{{ form.cowCode }}</span>
                    </div>
                </div>
                <div class="ordinaryRow">
                    <div class="tdWidth borderR"><span style="line-height: 17px; font-size: 14px;">DNA检测信息</span></div>
                    <div class="widthMaim">
                        <!-- <el-input disabled v-model="form.dnaTestingInfo" style="height: 40px;" placeholder="请输入DNA检测信息" /> -->
                        <span>{{ form.dnaTestingInfo }}</span>
                    </div>
                    <div class="tdWidth borderRL"><span>是否多胎</span></div>
                    <div class="ordinaryTd isNo">
                        <!-- <el-radio-group v-model="form.multipleBirth" disabled>
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false">否</el-radio>
                        </el-radio-group> -->
                        <span style="font-size: 14px; display: block; line-height: 40px; padding-left: 10px;" v-if="form.multipleBirth">是</span>
                        <span style="font-size: 14px; display: block; line-height: 40px; padding-left: 10px;" v-else>否</span>
                    </div>
                </div>
                <div class="recordBox">
                    <div class="recordTitle"><span style="line-height: 20px;">遗传资源入库情况</span></div>
                    <div class="recordcheck">
                        <div class="checkItem" style="padding: 5px 0;">
                            <span class="checkName" style="font-size: 14px;">组织采集：</span>
                            <span style="font-size: 14px;" v-if="form.hasTissueCollection">是</span>
                            <span style="font-size: 14px;" v-else>否</span>
                            <!-- <el-radio-group v-model="form.hasTissueCollection" disabled>
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group> -->
                        </div>
                        <div class="checkItem" style="padding: 5px 0;">
                            <span class="checkName" style="font-size: 14px;">DNA提取：</span>
                            <span style="font-size: 14px;" v-if="form.hasDnaExtraction">是</span>
                            <span style="font-size: 14px;" v-else>否</span>
                            <!-- <el-radio-group v-model="form.hasDnaExtraction" disabled>
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group> -->
                        </div>
                        <div class="checkItem" style="padding: 5px 0;">
                            <span class="checkName" style="font-size: 14px;">基因分型：</span>
                            <span style="font-size: 14px;" v-if="form.hasGenotype">是</span>
                            <span style="font-size: 14px;" v-else>否</span>
                            <!-- <el-radio-group v-model="form.hasGenotype" disabled>
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group> -->
                            <template v-if="form.hasGenotype == true ? true : false">
                            <span style="margin-left: 20px;">(</span>
                            <span style="font-size: 14px;">分型技术方法：</span>
                            <span style="font-size: 14px;" v-if="form.somatotype == '1'">2代测序</span>
                            <span style="font-size: 14px;" v-if="form.somatotype == '2'">基因芯片</span>
                            <!-- <el-radio-group v-model="form.somatotype" disabled style="margin-left: 10px;">
                                <el-radio :value="1" size="large">2代测序</el-radio>
                                <el-radio :value="2" size="large">基因芯片</el-radio>
                            </el-radio-group> -->
                            <span>)</span>
                            </template>
                        </div>
                        <div class="checkItem" style="padding: 5px 0;">
                            <span class="checkName" style="font-size: 14px;">系谱：</span>
                            <span style="font-size: 14px;" v-if="form.hasPedigree">是</span>
                            <span style="font-size: 14px;" v-else>否</span>
                            <!-- <el-radio-group v-model="form.hasPedigree" disabled>
                                <el-radio :value="true">是</el-radio>
                                <el-radio :value="false">否</el-radio>
                            </el-radio-group> -->
                        </div>
    
                        <!-- <div class="checkItem">
                            <el-checkbox v-model="checked4" />
                            <span class="checkName">DNA提取：是/否</span>
                            <span>（</span>
                            <span>分型技术方法：</span>
                            <el-checkbox v-model="checked4" />
                            <span style="margin-left: 10px; margin-right: 10px;">2代测序</span>
                            <el-checkbox v-model="checked4" />
                            <span style="margin-left: 10px;">基因芯片</span>
                            <span>）</span>
                        </div> -->
                        <!-- <div class="checkItem">
                            <el-checkbox v-model="checked4" />
                            <span class="checkName">基因分型：是/否</span>
                        </div> -->
                        <!-- <div class="checkItem">
                            <el-checkbox v-model="checked4" />
                            <span class="checkName">系谱</span>
                        </div> -->
                    </div>
                </div>
                <div class="estimate">
                    <div class="estimateTitle"><span>估计育种值</span></div>
                    <div class="estimateValue">
                        <!-- <el-input type="number" disabled v-model="form.estimatedBreedingValue" placeholder="请输入估计育种值" /> -->
                        <span>{{ form.estimatedBreedingValue }}</span>
                    </div>
                </div>
                <div class="estimate">
                    <div class="estimateTitle"><span>种群分类</span></div>
                    <div class="estimateValue">
                        <!-- <el-radio-group v-model="form.group" disabled>
                            <el-radio :value="20008">核心母牛</el-radio>
                            <el-radio :value="20009">基础母牛</el-radio>
                            <el-radio :value="20010">核心种公牛</el-radio>
                            <el-radio :value="20011">基础种公牛</el-radio>
                        </el-radio-group> -->
                        <span style="font-size: 14px;" v-if="form.group == '20008'">核心母牛</span>
                        <span style="font-size: 14px;" v-if="form.group == '20009'">基础母牛</span>
                        <span style="font-size: 14px;" v-if="form.group == '20010'">核心种公牛</span>
                        <span style="font-size: 14px;" v-if="form.group == '20011'">基础种公牛</span>
                    </div>
                </div>
                <div class="sixBox">
                    <div class="gender">性别</div>
                    <div class="genderValue">
                        <span style="padding-left: 10px; font-size: 14px;">{{ form.genderName }}</span>
                    </div>
                    <div class="birthday">出生日期</div>
                    <div class="birthdayValue">
                        <!-- <el-date-picker style="height: 40px; width: 140px;" v-model="form.birthday" type="date" placeholder="选择出生日期" /> -->
                        <span style="padding-left: 10px; font-size: 14px;">{{ form.birthday }}</span>
                    </div>
                    <div class="individuality" style="font-size: 14px;">是否胚胎个体</div>
                    <div class="individualityValue">
                        <span style="font-size: 14px; margin-left: 10px;" v-if="form.embryo">是</span>
                        <span style="font-size: 14px; margin-left: 10px;" v-else>否</span>
                        <!-- <el-radio-group v-model="form.embryo" disabled>
                            <el-radio :value="true">是</el-radio>
                            <el-radio :value="false">否</el-radio>
                        </el-radio-group> -->
                    </div>
                </div>
                <div class="sourceBox">
                    <div class="sourceTitle">来源</div>
                    <div class="sourceValue">
                        <!-- <el-input disabled v-model="form.source" style="height: 40px;" placeholder="请输入来源信息" /> -->
                        <span style="font-size: 14px;">{{ form.source }}</span>
                    </div>
                    <div class="sourceType">国别/引种种公牛站</div>
                    <div class="sourceTypeValue">
                        <!-- <el-input disabled v-model="form.sourceFarmCountry" style="height: 40px; width: 100%;" placeholder="请输入" /> -->
                        <span style="font-size: 14px; padding-left: 10px;">{{ form.sourceFarmCountry }}</span>
                    </div>
                    <div class="transferTime" style="font-size: 14px;">种牛转移时间</div>
                    <div class="transferTimeValue">
                        <!-- <el-date-picker disabled value-format="YYYY-MM-DD" style="height: 40px; width: 140px;" v-model="form.bullTransferDate" type="date" placeholder="选择转移时间" /> -->
                        <span style="padding-left: 10px;">{{ form.bullTransferDate }}</span>
                    </div>
                </div>
                <template v-if="form.hasPedigree == true ? true : false">
                <div class="pedigreeRowTitle">系谱</div>
                <div class="fatherBox">
                    <div class="father">
                        <span>父亲：</span>
                        <!-- <el-input disabled v-model="form.father" style="height: 40px;" placeholder="请输入" /> -->
                        <div style="padding: 0 10px; margin-top: 10px;">{{ form.father }}</div>
                    </div>
                    <div class="greenFather">
                        <div class="greenFatherItem borderBottom">
                            <div class="Box2b">
                                <div class="greenFatherItemTitle" style="border-bottom: 1px solid #666666;">
                                    <div class="zufu">祖父：</div>
                                    <!-- <el-input disabled v-model="form.grandfather" style="height: 40px;" placeholder="请输入祖父" /> -->
                                    <div style="padding: 0 10px; margin-top: 10px;">{{ form.grandfather }}</div>
                                </div>
                                <div class="greenFatherItemTitle">
                                    <div class="zufu">祖母：</div>
                                    <!-- <el-input disabled v-model="form.grandmother" style="height: 40px;" placeholder="请输入祖母" /> -->
                                    <div style="padding: 0 10px; margin-top: 10px;">{{ form.grandmother }}</div>
                                </div>
                            </div>
                            <div class="distantTitleBox">
                                <div>曾祖父</div>
                                <div style="border-top: 1px solid #666666; border-bottom: 1px solid #666666; box-sizing: border-box;">曾祖母</div>
                                <div>曾外祖父</div>
                                <div style="border-top: 1px solid #666666; box-sizing: border-box;">曾外祖母</div>
                            </div>
                            <div class="distantInput">
                                <div class="inputItem">
                                    <!-- <el-input disabled v-model="form.greatGrandfather" style="height: 38px;" placeholder="请输入曾祖父" /> -->
                                    <span>{{ form.greatGrandfather }}</span>
                                </div>
                                <div class="inputItem" style="border-top: 1px solid #666666; border-bottom: 1px solid #666666; box-sizing: border-box;">
                                    <!-- <el-input disabled v-model="form.greatGrandmother" style="height: 38px;" placeholder="请输入曾祖母" /> -->
                                    <span>{{ form.greatGrandmother }}</span>
                                </div>
                                <div class="inputItem">
                                    <!-- <el-input disabled v-model="form.greatGreatGrandfather" style="height: 38px;" placeholder="请输入曾外祖父" /> -->
                                    <span>{{ form.greatGreatGrandfather }}</span>
                                </div>
                                <div class="inputItem" style="border-top: 1px solid #666666;">
                                    <!-- <el-input disabled v-model="form.greatGreatGrandmother" style="height: 38px;" placeholder="请输入曾外祖母" /> -->
                                    <span>{{ form.greatGreatGrandmother }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fatherBox">
                    <div class="father">
                        <span>母亲：</span>
                        <!-- <el-input disabled v-model="form.mother" style="height: 40px;" placeholder="请输入" /> -->
                        <div style="padding: 0 10px; margin-top: 10px;">{{ form.mother }}</div>
                    </div>
                    <div class="greenFather">
                        <div class="greenFatherItem borderBottom">
                            <div class="Box2b">
                                <div class="greenFatherItemTitle" style="border-bottom: 1px solid #666666;">
                                    <div class="zufu">外祖父：</div>
                                    <!-- <el-input disabled v-model="form.maternalGrandfather" style="height: 40px;" placeholder="请输入外祖父" /> -->
                                    <div style="padding: 0 10px; margin-top: 10px;">{{ form.maternalGrandfather }}</div>
                                </div>
                                <div class="greenFatherItemTitle">
                                    <div class="zufu">外祖母：</div>
                                    <!-- <el-input disabled v-model="form.maternalGrandmother" style="height: 40px;" placeholder="请输入外祖母" /> -->
                                    <div style="padding: 0 10px; margin-top: 10px;">{{ form.maternalGrandmother }}</div>
                                </div>
                            </div>
                            <div class="distantTitleBox">
                                <div>外曾祖父</div>
                                <div style="border-top: 1px solid #666666; border-bottom: 1px solid #666666; box-sizing: border-box;">外曾祖母</div>
                                <div>外曾外祖父</div>
                                <div style="border-top: 1px solid #666666; box-sizing: border-box;">外曾外祖母</div>
                            </div>
                            <div class="distantInput">
                                <div class="inputItem">
                                    <!-- <el-input disabled v-model="form.maternalGreatGrandfather" style="height: 38px;" placeholder="请输入外曾祖父" /> -->
                                    <span>{{ form.maternalGreatGrandfather }}</span>
                                </div>
                                <div class="inputItem" style="border-top: 1px solid #666666; border-bottom: 1px solid #666666; box-sizing: border-box;">
                                    <!-- <el-input disabled v-model="form.maternalGreatGrandmother" style="height: 38px;" placeholder="请输入外曾祖母" /> -->
                                    <span>{{ form.maternalGreatGrandmother }}</span>
                                </div>
                                <div class="inputItem">
                                    <!-- <el-input disabled v-model="form.maternalGreatGreatGrandfather" style="height: 38px;" placeholder="请输入外曾外祖父" /> -->
                                    <span>{{ form.maternalGreatGreatGrandfather }}</span>
                                </div>
                                <div class="inputItem" style="border-top: 1px solid #666666;">
                                    <!-- <el-input disabled v-model="form.maternalGreatGreatGrandmother" style="height: 38px;" placeholder="请输入外曾外祖母" /> -->
                                    <span>{{ form.maternalGreatGreatGrandmother }}</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                </template>
            </div>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelHandler">关闭</el-button>
                    <!-- <el-button type="primary" @click="confirmHandler">确认</el-button> -->
                </span>
            </template>
        </el-drawer>
    </div>
    </template>
    
    <script setup>
    import { Plus } from '@element-plus/icons-vue'
    import { ref, reactive, onMounted, onUpdated } from 'vue'
    import { reqGetBreedList } from '@/api/cattleStructure'
    import { reqGetComNameList } from '@/api/company'
    import { reqUploadImage, reqGetCowRegistrationInfo, reqCowRegistrationUpDate } from '@/api/daily'
    import { ElMessage } from 'element-plus'
    
    // 接收父组件传递过来的数据
    let props = defineProps(['isDetailsShow', 'detailsId'])
    // 注册自定义事件
    let $emit = defineEmits(['closeDetailsDialog'])
    
    // 表单收集
    const form = reactive({
        cowId: '', // 母牛id
        farmName: '', // 厂名
        breed: '', // 品种
        address: '', // 地址
        purity: '', // 血统纯度
        registrationNumber: '', // 肉牛登记号
        managementNumber: '', // 生产管理号
        dnaTestingInfo: '', // 相关DNA检测信息
        multipleBirth: false, // 是否多胎
        hasTissueCollection: false, // 组织采集
        hasDnaExtraction: false, // DNA提取
        hasGenotype: false, // 基因分型
        somatotype: '', // 分型技术方法
        hasPedigree: false, // 系谱
        estimatedBreedingValue: '', // 估计育种值
        group: '', // 种群分类
        gender: '', // 性别
        birthday: '', // 出生日期
        embryo: false , // 是否胚胎个体
        source: '', // 来源
        sourceFarmCountry: '', // 国别/引种种公牛站
        bullTransferDate: '', // 种牛转移时间
        leftPhoto: '', // 左侧照
        frontPhoto: '', // 正前照
        rightPhoto: '', // 右侧照
        father: '', // 父亲
        grandfather: '', // 祖父
        grandmother: '', // 祖母
        greatGrandfather: '', // 曾祖父
        greatGrandmother: '', // 曾祖母
        greatGreatGrandfather: '', // 曾外祖父
        greatGreatGrandmother: '', // 曾外祖母
        mother: '', // 母亲
        maternalGrandfather: '', // 外祖父
        maternalGrandmother: '', // 外祖母
        maternalGreatGrandfather: '', // 外曾祖父
        maternalGreatGrandmother: '', // 外曾祖母
        maternalGreatGreatGrandfather: '', // 外曾外祖父
        maternalGreatGreatGrandmother: '', // 外曾外祖母
    })

    // 根据id，获取详情
    const getCowRegistrationInfo = async () => {
        let res = await reqGetCowRegistrationInfo({
            id: props.detailsId
        })
        if(res.status == 200){
            Object.assign(form, res.data)
        }
    }
    
    // 获取牛品种，筛选下拉列表
    let breedList = ref([])
    const getBreedList = async () => {
        let res = await reqGetBreedList()
        breedList.value = res.data
    }
    
    // 获取牛号下拉列表（生产管理号）
    let allComNameList = ref([])
    const getComNameList = async () => {
        let res = await reqGetComNameList()
        allComNameList.value = res.data
    }
    
    // 选择生产管理号，赋值性别，年龄，品种
    const selectItem = (item) => {
        form.cowId = item.id
        form.gender = item.gender
        form.breed = item.breed
        form.genderName = item.genderName
        if(item.birthday){
            form.birthday = item.birthday
        }else{
            console.log('此生产管理号，没有出生日期')
        }
    }
    
    // 清除 生产管理号时触发
    const clearItem = () => {
        form.cowId = ''
        form.gender = ''
        form.breed = ''
        form.birthday = ''
    }
    
    // 上传左侧照
    const uploadLeftPhoto = (data) => {
        let file = data.raw
        let fd = new FormData()
        fd.append('file', file)
        reqUploadImage(fd).then((res) => {
            if(res.status == 200){
                form.leftPhoto = res.data
            }
        })
    }
    
    // 上传正面照
    const uploadFrontPhoto = (data) => {
        let file = data.raw
        let fd = new FormData()
        fd.append('file', file)
        reqUploadImage(fd).then((res) => {
            if(res.status == 200){
                form.frontPhoto = res.data
            }
        })
    }
    
    // 上传右侧照
    const uploadRightPhoto = (data) => {
        let file = data.raw
        let fd = new FormData()
        fd.append('file', file)
        reqUploadImage(fd).then((res) => {
            if(res.status == 200){
                form.rightPhoto = res.data
            }
        })
    }
    
    // 关闭按钮
    const cancelHandler = () => {
        $emit('closeDetailsDialog', false)
    }
    
    // 确认按钮
    const confirmHandler = async () => {
        let res = await reqCowRegistrationUpDate(Object.assign(form, {
            id: props.detailsId
        }))
        if(res.status == 200){
            ElMessage({
                type: 'success',
                message: '新增成功'
            })
            $emit('closeDetailsDialog', false)
        }
    }

    // 组件更新
    onUpdated(() => {
        getCowRegistrationInfo()
    })
    
    // 组件挂载完毕
    onMounted(() => {
        getBreedList()
        getComNameList()
    })
    </script>
    
    <style scoped lang="scss">
    // :deep(.el-drawer__header) {
    //     margin-bottom: 0;
    //     color: #000;
    // }
    .dialog-footer button:first-child {
        margin-right: 10px;
    }
    // 左中右照片
    :deep(.avatar-uploader) {
        display: flex;
        justify-content: center;
        width: 130px;
        height: 130px;
        margin: 0 auto;
    }
    :deep(.avatar-uploader .avatar) {
      width: 130px;
      height: 130px;
      display: block;
    }
    :deep(.avatar-uploader .el-upload) {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }
    
    :deep(.avatar-uploader .el-upload:hover) {
      border-color: var(--el-color-primary);
    }
    
    :deep(.el-icon.avatar-uploader-icon) {
      font-size: 28px;
      color: #8c939d;
      width: 130px;
      height: 130px;
      text-align: center;
    }
    // 左中右照片 end
    .imitateTable{
        border: 1px solid #666;
        border-bottom: none;
        // 表格中的输入框，样式修改
        ::v-deep(.el-input__wrapper) {
            --el-input-border-color: #ffffff;
            --el-input-border-radius: 0px;
            --el-input-focus-border-color: #ffffff;
            --el-input-hover-border-color: #ffffff; 
        }
        // 表格中的下拉框，样式修改
        
        .cattlePhotoRow{
            display: flex;
            border-bottom: 1px solid #666;
            & > div{
                    flex: 1;
                    padding: 10px;
               .imgIcon{
                    display: block;
                    margin: 0 auto;
                    width: 60px;
                    height: 80px;
                    opacity: 0.65;
                    border-radius: 5px;
               }
               .direction{
                    text-align: center;
                    margin-top: 5px;
                    font-size: 12px;
                    color: #666;
               }
            }
            .middle{
                border-left: 1px solid #666;
                border-right: 1px solid #666;
                box-sizing: border-box;
            }
        }
        .ordinaryRow{
            display: flex;
            border-bottom: 1px solid #666;
            .ordinaryTd{
                flex: 1;
            }
            .isNo{
                display: flex;
                align-items: center;
                flex: 1;
                .el-radio-group{
                    padding-left: 10px;
                }
            }
            .borderR{
                box-sizing: border-box;
                border-right: 1px solid #666;
            }
            .borderRL{
                box-sizing: border-box;
                border-right: 1px solid #666;
                border-left: 1px solid #666;
            }
            .widthMaim{
                flex: 1;
                display: flex;
                align-items: center;
                padding-left: 10px;
                span{
                    font-size: 14px;
                }
            }
            .tdWidth{
                width: 100px;
                height: 40px;
                display: flex;
                align-items: center;
                justify-content: center;
                span{
                    text-align: center;
                }
            }
        }
        .recordBox{
            display: flex;
            border-bottom: 1px solid #666;
            .recordTitle{
                border-right: 1px solid #666;
                width: 100px;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                justify-content: center;
                span{
                    display: inline-block;
                    padding: 0 10px;
                    text-align: center;
                    line-height: 16px;
                }
            }
            .recordcheck{
                padding-left: 10px;
                .checkItem{
                    display: flex;
                    align-items: center;
                    .el-checkbox{
                        margin-right: 0;
                    }
                    .checkName{
                        min-width: 75px;
                    }
                }
            }
        }
        .estimate{
            display: flex;
            border-bottom: 1px solid #666;
            .estimateTitle{
                width: 100px;
                border-right: 1px solid #666;
                box-sizing: border-box;
                text-align: center;
                height: 40px;
                line-height: 40px;
            }
            .estimateValue{
                height: 40px;
                line-height: 40px;
                padding-left: 10px;
                .el-radio-group{
                    .el-radio{
                        margin-right: 10px;
                    }
                }
            }
        }
        .sixBox{
            display: flex;
            border-bottom: 1px solid #666;
            .gender{
                text-align: center;
                width: 100px;
                line-height: 40px;
                border-right: 1px solid #666;
                box-sizing: border-box;
            }
            .genderValue{
                width: 163px;
                border-right: 1px solid #666;
                box-sizing: border-box;
                display: flex;
                align-items: center;
                .el-radio-group{
                    flex-wrap: nowrap;
                    padding-left: 10px;
                    .el-radio{
                        margin-right: 10px;
                    }
                }
            }
            .birthday{
                width: 100px;
                border-right: 1px solid #666;
                box-sizing: border-box;
                text-align: center;
                line-height: 40px;
            }
            .birthdayValue{
                flex: 1;
                border-right: 1px solid #666;
                box-sizing: border-box;
                display: flex;
                align-items: center;
            }
            .individuality{
                width: 100px;
                text-align: center;
                line-height: 40px;
                border-right: 1px solid #666;
                box-sizing: border-box;
            }
            .individualityValue{
                display: flex;
                align-items: center;
                flex: 1;
                .el-radio-group{
                    padding-left: 10px;
                    .el-radio{
                        margin-right: 10px;
                    }
                }
                
            }
        }
        .sourceBox{
            display: flex;
            border-bottom: 1px solid #666;
            .sourceTitle{
                text-align: center;
                width: 100px;
                line-height: 40px;
                border-right: 1px solid #666;
                box-sizing: border-box;
            }
            .sourceValue{
                width: 163px;
                padding-left: 10px;
                border-right: 1px solid #666;
                box-sizing: border-box;
                display: flex;
                align-items: center;
            }
            .sourceType{
                width: 100px;
                border-right: 1px solid #666;
                box-sizing: border-box;
                line-height: 18px;
                font-size: 14px;
                display: flex;
                align-items: center;
                justify-content: center;
                text-align: center;
            }
            .sourceTypeValue{
                flex: 1;
                border-right: 1px solid #666;
                box-sizing: border-box;
                display: flex;
                align-items: center;
            }
            .transferTime{
                width: 100px;
                border-right: 1px solid #666;
                box-sizing: border-box;
                line-height: 40px;
                text-align: center;
            }
            .transferTimeValue{
                flex: 1;
                display: flex;
                align-items: center;
            }
        }
        .pedigreeRowTitle{
            text-align: center;
            line-height: 34px;
            border-bottom: 1px solid #666666;
            box-sizing: border-box;
        }
        .fatherBox{
            display: flex;
            border-bottom: 1px solid #666666;
            height: 161px;
            box-sizing: border-box;
            .father{
                width: 230px;
                border-right: 1px solid #666666;
                box-sizing: border-box;
                display: flex;
                justify-content: center;
                flex-direction: column;
                span{
                    padding: 0px 10px;
                }
            }
            .greenFather {
                flex: 1;
                .greenFatherItem {
                    display: flex;
                    height: 160px;
                    .Box2b{
                        flex: 1;
                        height: 80px;
                        .greenFatherItemTitle{
                            box-sizing: border-box;
                            height: 80px;
                            flex: 1;
                            border-right: 1px solid #666666;
                            box-sizing: border-box;
                            display: flex;
                            flex-direction: column;
                            justify-content: center;
                            .zufu{
                                padding-left: 10px;
                            }
                        }
                    }
                    .distantTitleBox{
                        border-right: 1px solid #666666;
                        width: 100px;
                        div{
                            height: 40px;
                        }
                        .borderBottom{
                            border-bottom: 1px solid #666666;
                            box-sizing: border-box;
                        }
                        div {
                            height: 40px;
                            line-height: 40px;
                            text-align: center;
                        }
                    }
                    .distantInput{
                        flex: 1;
                        height: 80px;
                        .inputItem{
                            height: 40px;
                            span{
                                padding-left: 10px;
                                font-size: 14px;
                                line-height: 40px;
                            }
                        }
                    }
                }
            }
        }
    }
    </style>